<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>

<div id="a">{{ score }}</div>
<!-- ---------------------------------------------- -->
<div id="b">
	<!-- <span v-bind:title="infos"> -->
	<span v-bind:title="message">
		鼠标悬停几秒钟查看此处动态绑定的提示信息！
	</span>
</div>
<!-- ---------------------------------------------- -->
<div id="c">
  <p v-if="seens">现在你看到我了</p>
</div>
<!-- ---------------------------------------------- -->
<div id="d">
	<ol>
		<li v-for="todo in todos">
			{{ todo.text }}
		</li>
	</ol>
</div>
<!-- ---------------------------------------------- -->
<div id="app-5">
	<p>{{ message }}</p>
	<button v-on:click="reverseMessage">逆转消息</button>
</div>
<br>
<!-- ---------------------------------------------- -->
<div id="example-1">
	<button v-on:click="num += 1">Add 1</button>
	<p>The button above has been clicked {{ num }} times.</p>
</div>
<!-- ---------------------------------------------- -->
<div id="hehe">
	<p v-for="item of items">
		{{ parentMessage }} - {{ $index }} - {{ item.message }}
	</p>
</div>
<!-- ---------------------------------------------- -->

</body>
</html>
<!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>

<script type="text/javascript">
	
var a = new Vue({
	el: '#a',
	data: {
		score: 'Hello Vue!'
	}
})
<!-- ---------------------------------------------- -->
var b = new Vue({
	el: '#b',
	data: {
		// infos: '页面加载于 ' + new Date().toLocaleString()
		message: '哈哈，SD，你还真放这儿！！！'
	}
})
<!-- ---------------------------------------------- -->
var c = new Vue({
	el: '#c',
	data: {
		seens: true
	}
})
<!-- ---------------------------------------------- -->
var d = new Vue({
	el: '#d',
	data: {
		todos: [
			{ text: '学习 JavaScript' },
			{ text: '学习 Vue' },
			{ text: '整个牛项目' }
		]
	}
})
<!-- ---------------------------------------------- -->
var app5 = new Vue({
	el: '#app-5',
	data: {
		message: '你是一个渣比'
	},
	methods: {
		reverseMessage: function () {
			this.message = this.message.split('').reverse().join('')
		}
	}
})
<!-- ---------------------------------------------- -->
var example1 = new Vue({
	el: '#example-1',
	data: {
		num: 0
	}
})
<!-- ---------------------------------------------- -->
var hehe = new Vue({
	el: '#hehe',
	data: {
		parentMessage: 'Parent',
		items: [
			{ message: 'Foo' },
			{ message: 'Bar' },
			{ message: 'Eag' },
			{ message: 'Cry' },
		]
	}
});
<!-- ---------------------------------------------- -->

</script>